Elemento 1

Elemento 2

Elemento 3
Elemento 4
corpo
pagina
container
http://jsfiddle.net/zt9qju79/2/
Codigo fonte:
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Saida e entrada em javascript usando html e css </title>
    
 </head>
 <!-- css externo -->
      <!-- estilos linkadas -->
 <!--  <link rel="stylesheet"type="text/css"href="estilos.css"media="all" /> -->
      <!-- estilos importadas -->  
      <style>                                                
     /*  @charset "utf-8"                                       usar dentro de uma folha de estilo
         @import url("estilos.css") screen, projection;         forma extensa  
        @import "estilos.css" screen, projection;               forma abreviada */
     


     /* css interno - incorporado */
      
       #container{
        width: auto;
        height: 460px;; 
        background-color: SlateGrey;
      }
        #pagina{
        position: absolute;
        left: 50%;
        top: 50%
        width: 400px;
        height: 420px;
        background-color: DimGrey;  
      }
        #corpo{
        margin:10px; 
        width: 360px;
        height: 360px;
        background-color: Salmon;
      }

      #elemento0{
          margin:10px;
          width: 220px;
          height:80px;

        }

      h1 {       /* elemento 1*/
        margin:10px; 
        width: 280px;
        background-color: #cc9; 
        border:20px solid #f00; 
        padding: 5px;
        text-align:center;
      }

      h3 {    /* elemento 2*/
        margin:10px; 
        width: 280px;
        background-color: #fc9; 
        border:10px solid #039; 
        padding: 10px;
        text-align:center;
      }

      .elemento3 {
        margin:10px; 
        width: 280px;
        background-color: #ff9; 
        border:5px solid #f0f; 
        padding: 5px;
        text-align:center;
      }

      #elemento4 {
        margin:10px; 
        width: 280px;
        background-color: #cff; 
        border:2px solid #039; 
        padding: 10px; 
        text-align:center;
      }
         
     </style>

</head>

 <body>
 <!-- css interno - inline -->
  <div id="container">
    container
    <div id="pagina">
         pagina
         <div id="corpo">
             corpo
             <p><h3>Elemento 0<img id="elemento0" src="ComponentesBoxModel.jpg"  
                  alt="logo de 220 por 80 pixel" ></h3></p>
             <h1 id="elemento1">Elemento 1</h1>
            <h3 id="elemento2">Elemento 2</h3>
            <p class="elemento3">Elemento 3</p>          
            <p id="elemento4">Elemento 4</p>
             corpo
        </div> <!-- fim corpo -->
        pagina
    </div><!-- fim pagina -->
    container   
</div><!-- fim container -->



 </body>

 </html>